<template>
  <div class="livePage">
    <img :src="bannerUrl" alt="" />
    <div :class="timeClass">
      {{ timeToday }}
    </div>
    <div class="guideText" :style="codetextStyle">
      <div class="textOne" v-if="formDataObject.codeTextList.indexOf('1') > -1">
        {{ formDataObject.qrCodeGuide }}
      </div>
      <div class="textTwo" v-if="formDataObject.codeTextList.indexOf('2') > -1">
        {{ formDataObject.qrCodeGuide2 }}
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
export default {
  name: "livePage",
  props: {
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    formDataObject() {
      switch (this.formData.modelType) {
        case 1:
          return this.formData.modelOne;
        case 2:
          return this.formData.modelTwo;
        case 3:
          return this.formData.modelThree;
        case 4:
          return this.formData.modelFour;
      }
    },
    bannerUrl() {
      switch (this.formData.modelType) {
        case 1:
          return require("@/assets/images/poster/qietu_mb2.png");
        case 2:
          return require("@/assets/images/poster/qietu_mb1.png");
        case 3:
          return require("@/assets/images/poster/qietu_mb3.png");
        case 4:
          return require("@/assets/images/poster/qietu_mb4.png");
      }
    },
    codetextStyle() {
      switch (this.formData.modelType) {
        case 1:
          return {
            width: "100%",
            bottom: "68px",
          };
        case 2:
          return {};
        case 3:
          return {
            width: "100%",
            bottom: "58px",
          };
        case 4:
          return {
            bottom: "83px",
          };
      }
    },
    timeToday() {
      switch (this.formData.modelType) {
        case 1:
          return "—" + moment().format("YYYY.MM.DD");
        case 2:
          return moment().format("YYYY.MM.DD");
        case 3:
          return moment().format("YYYY/MM/DD");
        case 4:
          return moment().format("YYYY.MM.DD");
      }
    },
    timeClass() {
      switch (this.formData.modelType) {
        case 1:
          return "timeToday2";
        case 2:
          return "timeToday1";
        case 3:
          return "timeToday3";
        case 4:
          return "timeToday4";
      }
    },
  },
};
</script>
<style lang="less" scoped>
.livePage {
  width: 375px;
  position: relative;
  img {
    width: 100%;
  }
  .guideText {
    position: absolute;
    right: 0;
    bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 144px;
    height: 28px;
    .textOne,
    .textTwo {
      width: 100%;
      transform: scale(0.9);
      transform-origin: 47%;
      font-size: 8px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 14px;
      opacity: 0.8;
    }
  }
  .timeToday1 {
    position: absolute;
    left: 255px;
    top: 145px;
    font-family: SourceHanSerifCN-Medium;
    font-size: 17px;
    color: #666666;
    letter-spacing: 1px;
    line-height: 18px;
    font-weight: 500;
  }
  .timeToday2 {
    position: absolute;
    left: 89px;
    top: 278.5px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #191919;
    letter-spacing: 0;
    font-weight: 400;
  }
  .timeToday3 {
    position: absolute;
    left: 269px;
    top: 75px;
    font-family: SourceHanSerifCN-Medium;
    font-size: 12px;
    color: #ffffff;
    letter-spacing: 1px;
    font-weight: 500;
  }
  .timeToday4 {
    position: absolute;
    left: 24px;
    top: 508px;
    font-family: SourceHanSansSC-Medium;
    font-size: 24px;
    color: #5a5a5a;
    letter-spacing: 1px;
    font-weight: 500;
  }
}
</style>